<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 530px;
            display: flex;
            justify-content: space-between;
        }
        img{
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }
        .box input{
            width: 320px;
            height: 40px;
        }
        .box input:focus{
            height: 80px;
            /* transform: all 0.5s; */
        }
        span{
            margin-left: 400px;
            opacity: 0;
            transform: all 0.5s;
            /* display: none; */
        }
        button{
            width: 70px;
            height: 46px;
            background-color: rgb(104, 81, 235);
            border: 0 solid rgb(104, 81, 235);
            border-radius: 12px;
        }
        .bottom{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
    <img src="../../作业/images/course01.png" alt="">
    <input type="text" placeholder="发一条友善的评论" maxlength="200">
    <button>发表</button>
    </div>
    <span>0/200字</span>
    <div class="bottom">
        <p>清风徐来</p>
        <p class="p1">评论</p>
        <p>14点05分</p>
    </div>
    <script>
        const inp=document.querySelector('input')
        const span=document.querySelector('span')
        const bottom=document.querySelector('.bottom')
        const p1=document.querySelector('.p1')
        inp.addEventListener('input',function(){
            span.innerHTML=`${inp.value.length}/200字`
        })
        inp.addEventListener('focus',function(){
            span.style.opacity=1
        })
        inp.addEventListener('blur',function(){
            span.style.opacity=0
        })
        inp.addEventListener('keydown',function(e){
            console.log(e.key)
            if(e.key==='Enter'){
                bottom.style.display='block'
                p1.innerHTML=inp.value
                span.innerHTML='0/200字'
                inp.value=''
            }
        })

        const btn=document.querySelector('button')
        btn.addEventListener('click',function(){
            this.style.color='red'
        })
        // inp.addEventListener('keydown',function(){
        //     console.log('下')
        // })
        // inp.addEventListener('keyup',function(){
        //     console.log('起')
        // })
    </script>
</body>
</html>